<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<div class="col-md-12">
   <div class="progress progress-xxxs no-margin no-radius bg-white">
      <div class="progress-bar bg-light" style="width:100%"></div>
   </div>
   <div class="panel-heading ng-scope" >
	  <div class="clear">
		<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm"><i class="ti-eye text-primary"></i> 曝光量</div>
			<div class="text-2x font-bold" id="viewCount">${form.totalData['pv']}<small class="text-muted"></small></div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm"><i class="glyphicon glyphicon-hand-up text-primary"></i> 点击量</div>
			<div class="text-2x font-bold" id="clickCount">${form.totalData['pc']}<small class="text-muted"></small></div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm"><i class="fa fa-calculator text-primary"></i> 点击率</div>
			  <div class="text-2x font-bold" id="acr">
 			  <c:if test="${! empty form.totalData['ctr'] }"> <fmt:formatNumber value="${form.totalData['ctr'] }" maxFractionDigits="2" />%</c:if> 
			  </div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="panel p">
			<div class="panel-heading p-v-xs p-h-sm"><i class="fa fa-money text-primary"></i> 花费</div>
			  <div class="text-2x font-bold" id="cost">
 			<c:if test="${! empty form.totalData['total_cost'] }">￥<fmt:formatNumber value="${form.totalData['total_cost'] }" maxFractionDigits="2" /></c:if> 
			  </div>
			</div>
		</div>
    </div>
    <div class="panel-body">
         <div id="dashboardChart" style="height: 400px ">
         </div>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
$(function(){

	var rpts = ${form.data}
	var xs = _.pluck(rpts , 'rdate');
	var xsl = _.pluck(rpts, 'date');
	var yyyy = 0;
	var mm = 0;
	var dd = 0;
	var now = new Date();
	if(index ==1){
		yyyy = now.getFullYear();
		mm = (now.getMonth()+1).toString();
		dd = now.getDate().toString();
	}else if(index ==2){
		var yesterday = new Date(now.getTime()-86400000);
		yyyy = yesterday.getFullYear();
		mm = (yesterday.getMonth()+1).toString();
		dd = yesterday.getDate().toString();
	}
	if(mm.length==1){
		mm = '0'+mm;
	}
	if(dd.length==1){
		dd = '0'+dd;
	}
	console.log(yyyy+"-"+mm+"-"+dd);
	//渲染图表
	var chart = echarts.init(document.getElementById("dashboardChart"),'macarons')
	var option1 = {
		tooltip: {
			trigger: 'axis',
			formatter: function (params) {
				return yyyy+"-"+mm+"-"+dd +" "+ params[0].name +'<br />' +
						params[0].seriesName +" : "+ params[0].value+'<br />' +
						params[1].seriesName +" : "+ params[1].value+'<br />' +
						params[2].seriesName +" : "+ params[2].value;
			}
		},
		title: {
			text: ''
		},
		legend: {
            data:['曝光量（次）','点击量（次）','总花费']
        },
        xAxis: {
            data: xsl,
			axisLabel: {
				formatter: function (value, idx) {
					return idx === 0 ? mm+"-"+dd:value;
				}
			},
			axisTick: {
				show:false
			}
        },
        yAxis: {},
        series: [{
            name: '曝光量（次）',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
			symbolSize: 5,
            data: _.pluck(rpts, 'pv')
        },{
            name: '点击量（次）',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
			symbolSize: 5,
            data: _.pluck(rpts, 'pc')
        },{
            name: '总花费',
            smooth:true,
            type: 'line',
            areaStyle: {
                normal: {}
            },
			symbolSize: 5,
            data: _.pluck(rpts, 'total_cost')
        }]
	}
	var option2 = {
		tooltip:{
			trigger: 'axis'
		},
		title: {
			text: ''
		},
		legend: {
			data:['曝光量（次）','点击量（次）','总花费']
		},
		xAxis: {
			data: xs,
			axisTick: {
				show:false
			}
		},
		yAxis: {},
		series: [{
			name: '曝光量（次）',
			smooth:true,
			type: 'line',
			areaStyle: {
				normal: {}
			},
			symbolSize: 5,
			data: _.pluck(rpts, 'pv')
		},{
			name: '点击量（次）',
			smooth:true,
			type: 'line',
			areaStyle: {
				normal: {}
			},
			symbolSize: 5,
			data: _.pluck(rpts, 'pc')
		},{
			name: '总花费',
			smooth:true,
			type: 'line',
			areaStyle: {
				normal: {}
			},
			symbolSize: 5,
			data: _.pluck(rpts, 'total_cost')
		}]
	}
	//
	if(index == 1|| index == 2){
		chart.setOption(option1)
	}else{
		chart.setOption(option2)
	}
})
</script>